<template>
  <div v-if="content === 0 || content" class="text-over-tooltip-components">
    <el-tooltip :open-delay="openDelay" :disabled="isDisabledTooltip" :content="tooltip || content" :placement="placement">
      <div slot="content" style="max-width:200px;">
        <span v-if="dangerouslyUseHtml" class="tooltip-scroll" v-html="tooltip || content"/>
        <span v-else>{{ tooltip || content }}</span>
      </div>
      <div class="ellipsisOne" @mouseover="onMouseOver(refName)">
        <span :ref="refName">{{ content }}</span>
      </div>
    </el-tooltip>
  </div>
  <div v-else>--</div>
</template>

<script>
export default {
  name: 'TextOverTooltip',
  props: {
    content: {
      type: String | Number,
      default: ''
    },
    tooltip: {
      type: String | Number,
      default: ''
    },
    openDelay: {
      type: Number,
      default: 800
    },
    placement: {
      type: String,
      default: () => {
        return 'top';
      }
    },
    dangerouslyUseHtml: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      refName: 'toolTipContentRef',
      isDisabledTooltip: true // 是否需要禁止提示
    };
  },
  methods: {
    // 移入事件: 判断内容的宽度contentWidth是否大于父级的宽度
    onMouseOver(str) {
      const parentWidth = this.$refs[str].parentNode.offsetWidth;
      const contentWidth = this.$refs[str].offsetWidth;
      // 判断是否禁用tooltip功能
      this.isDisabledTooltip = contentWidth <= parentWidth;
    }
  }
};
</script>

<style lang="scss" scoped>
.text-over-tooltip-components {
  display: flex;
  max-width: 100%;
}
.tooltip-scroll {
  @include scrollBar($x:hidden, $y: auto,$width: 3px);
  max-height: 200px;
  white-space: pre-wrap;
  display: block;
  padding-right: 2px;
}
</style>
